<template>
  <el-dialog
    v-model="dialogVisible"
    :title="
      props.roleGroup
        ? $t('pageLdap.modal.editRoleGroup')
        : $t('pageLdap.modal.addNewRoleGroup')
    "
    width="500"
  >
    <el-form :model="form" :rules="rules">
      <dl v-if="roleGroup !== null" class="mb-4">
        <dt>{{ $t('pageLdap.modal.groupName') }}</dt>
        <dd>{{ form.groupName }}</dd>
      </dl>
      <el-form-item
        v-else
        :label="$t('pageLdap.modal.groupName')"
        label-width="140px"
        prop="groupName"
      >
        <el-input class="w-48" v-model="form.groupName" autocomplete="off" />
      </el-form-item>

      <el-form-item
        :label="$t('pageLdap.modal.groupPrivilege')"
        prop="groupPrivilege"
      >
        <el-select
          id="privilege"
          v-model="form.groupPrivilege"
          placeholder="privilege"
        >
          <template v-if="!roleGroup">
            <el-option
              :label="$t('global.form.selectAnOption')"
              :value="null"
              disabled
            />
          </template>
          <template v-else>
            <el-option
              v-for="(value, index) in accountRoles"
              :key="index"
              :label="value"
              :value="value"
            />
          </template>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm()">
          {{ $t('global.action.cancel') }}
        </el-button>
        <el-button type="primary" @click="onOk()">
          {{ $t('global.action.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import useVuelidateTool from '@/hooks/useVuelidateTool';
import { useUserManagementStore } from '@/store/UserSecurity/UserManagement/UserManagementStore';

const { useVuelidate, required, requiredIf, elementInputValidator } =
  useVuelidateTool();
const userManagementStore = useUserManagementStore();

const emit = defineEmits(['ok']);
const props = defineProps<{ roleGroup: Object }>();
const form = reactive({ groupName: null as any, groupPrivilege: null as any });
const dialogVisible = ref(false);
defineExpose({ dialogVisible });

const accountRoles = computed(() => userManagementStore.accountRoles);

watch(
  () => props.roleGroup,
  (value: any) => {
    if (value === null) return;
    form.groupName = value.groupName;
    form.groupPrivilege = value.groupPrivilege;
  },
);

const v$ = useVuelidate(
  {
    groupName: {
      requiredIf: requiredIf(() => !props.roleGroup),
    },
    groupPrivilege: { required },
  },
  form,
);

const rules = computed(() => {
  return {
    groupName: [
      {
        trigger: 'change',
        validator: elementInputValidator.value(v$, 'groupName'),
      },
    ],
    groupPrivilege: [
      {
        trigger: 'change',
        validator: elementInputValidator.value(v$, 'groupPrivilege'),
      },
    ],
  };
});

const handleSubmit = () => {
  v$.value.$touch();
  if (v$.value.$invalid) return;
  emit('ok', {
    addNew: !props.roleGroup,
    groupName: form.groupName,
    groupPrivilege: form.groupPrivilege,
  });
  closeModal();
};
const closeModal = () => {
  nextTick(() => {
    dialogVisible.value = false;
  });
};
const resetForm = () => {
  form.groupName = null;
  form.groupPrivilege = null;
  v$.value.$reset();
  dialogVisible.value = false;
};
const onOk = () => {
  handleSubmit();
};
</script>
